<template>
  <div class="list-div">
    <el-row>
      <el-form>
        <el-col :span="24">
          <el-col :span="4">
            <el-form-item label="区域" label-width="80px">
              <el-select v-model="search.areaId" clearable filterable placeholder="请选择区域" style="width: 100%" @change="getTemplate">
                <el-option :label="d.name" :value="d.id" :key="d.id" v-for="(d,ddix) in areas"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="项目名" label-width="80px">
              <el-input v-model="search.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="" label-width="30px">
              <el-button class="btnAdd" size="mini"  @click="getData()">搜索</el-button>
              <el-button class="btnAdd" size="mini"  @click="add()">添加</el-button>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="page.records" header-row-class-name="tableheader" height="calc(100vh - 220px)" border  style="width: 100%">
        <el-table-column  prop="name" label="项目名"> </el-table-column>
        <el-table-column  prop="areaName" label="区域"></el-table-column>
        <el-table-column  prop="img" label="图片">
          <template slot-scope="scope">
            <el-image style="height: 100px" :src="scope.row.img" alt="" @click="showFileImg(scope.$index, scope.row)"></el-image>
          </template>
        </el-table-column>
        <el-table-column  prop="sort" label="排序"> </el-table-column>
        <!--        <el-table-column prop="time" label="发送时间">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{common.timestampToTimeMils(scope.row.time)}}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope"  v-if="scope.row.id>0">
            <el-button class="opt2" size="mini"  @click="edit(scope.$index, scope.row)">编辑</el-button>
            <el-button class="opt5" size="mini"  type="danger"  @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <div class="pagination">


      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="page.size"
        layout="total,  prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>

    </div>

    <el-dialog :title="showTitle" :visible.sync="showEdit">

      <el-form ref="form" :rules="rules" :model="form" label-width="80px">

        <el-row>
          <el-col :span="24">
            <el-form-item label="项目名" label-width="80px" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="区域" label-width="80px" prop="areaId">
              <el-select v-model="form.areaId" clearable  filterable placeholder="请选择区域" style="width: 100%">
                <el-option :label="d.name" :value="d.id" :key="d.id" v-for="(d,ddix) in areas"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传图片" prop="img">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" label-width="80px" prop="sort">
              <el-input-number v-model="form.sort" min="1" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>


        </el-row>


        <el-form-item>
          <el-button class="btnAdd" type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="showIconDialog" :append-to-body="true" title="地图" z-index="1000" custom-class="dialogBig">
      <img width="100%" :src="this.showIcon" alt="" style="height: calc(80vh - 120px)">
    </el-dialog>
  </div>

</template>

<script>
import ElRow from "element-ui/packages/row/src/row";
export default {
  components: {ElRow},
  name: 'Preoject',
  data () {
    return {
      showIconDialog:false,
      showIcon:null,
      optType:'',
      areas:[],
      search:{
        name:null,
        areaId:null
      },
      showEdit: false,
      showTitle: '',
      page: {},
      pageNo: 1,
      form: {
        fileList:null,
        id:null,
        areaId: null,
        name:null,
        img: null,
        sort: 1,
      },
      rules: {
        areaId: [
          { required: true, message: '请选择区域', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请选择项目名', trigger: 'blur' },
          { max: 50, message: '不超过 50 个字符', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '请上传图片', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'change' },
        ],
      },
      content:'',
    }
  },
  methods: {

    handleCurrentChange(val){
      this.pageNo = val
      this.getData()
    },
    showFileImg(idx,row){
      this.showIconDialog=true
      this.showIcon = row.img
    },

    removeFile(file){
      this.form.img = null
    },
    uploadSuccess(file){
      this.form.img = file.url
    },
    getEara(){
      this.$axios.get('/admin/select/preoject-area', {
        params: {
        }
      }).then(r => {
        let res = r.data
        if (res.code !== 1) {
          this.$message.error(res.msg)
          return
        }
        this.areas = res.data
      })
    },
    getData(){
      this.$axios.get('/admin/preoject/list', {
        params: {
          title: this.search.title,
          type: this.search.type,
          pageNo: this.pageNo,
        }
      }).then(r => {
        let res = r.data
        if (res.code !== 1) {
          this.$message.error(res.msg)
          return
        }
        this.page = res.data
      })
    },
    add(){
      this.optType='add'
      this.showEdit = true
      this.showTitle = '新增项目'
      this.form={
        id:null,
        areaId: null,
        name:null,
        img: null,
        sort: null,
      }
    },
    edit(idx,row){
      this.optType='edit'
      this.showEdit = true
      this.showTitle = '修改项目'
      this.form.id=row.id
      this.form.areaId=row.areaId
      this.form.name=row.name
      this.form.sort=row.sort
      this.form.img=row.img
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/admin/preoject/add'
          if (this.optType=='edit'){
            url = '/admin/preoject/update'
          }
          this.$axios.post(url, {
            id:this.form.id,
            areaId:this.form.areaId,
            name:this.form.name,
            img:this.form.img,
            sort:this.form.sort,
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.showEdit = false
            this.getData()
          })
        } else {
          return false;
        }
      });
    },

    deleteData(idx,row){
      this.$confirm('是否删除【'+row.name+'】数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {

        this.$axios.get('/admin/preojectpreoject/delete', {
          params: {
            id: row.id,
          }
        }).then(r => {
          let res = r.data
          this.$message.error(res.msg)
          if (res.code !== 1) {
            return
          }
          this.getData()
        })

      }).catch(() => {

      });
    },
    init () {
      this.getEara()
      this.getData()
    }
  },
  mounted: function () {
  },
  created: function () {
    this.init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

</style>
